<template>
    <appFrame
        leftText="首页"
        rightIcon="icon_Nav_saoyisao"
        rightIconTip='扫一扫'
        @rightClick="RichScan"
        :qrcode="qrcode"
        :camera="camera"
        @changeCamera="changeCamera"
        @changeQrcode="changeQrcode"
        @onRichScanCallback="onRichScanCallback"
    >
        <div class="home">
            <div class="dataItem">
                <div class="subTitle">
                    实时快照
                </div>
                <el-row class="systemOperationOverview_main">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-for="(item, index) in snapshotList" :key="index">
                        <div class="OverviewItem" @click="goPage(item.path)">
                            <div class="left_ico">
                                <img class="left_img" :src="item.img" alt />
                                <p class="right_msg_title">{{ $t(item.name) }}</p>
                            </div>
                            <div class="right_msg">
                                <p class="right_msg_msg" :class="item.className">
                                    {{ item.value>1000?'1000+':item.value }}
                                    <span>条</span>
                                </p>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <!-- <div class="dataItem" v-for="(item, index) in dataItem" :key="index">
                <div class="subTitle">
                    <span>{{ item.title }}</span>
                    <span @click="editModules">
                        <i class="el-icon-setting"></i>
                        管理模块
                    </span>
                </div>
                <div class="list flex-between-center flex-wrap">
                    <div class="childItem" v-for="(childItem, childIndex) in showModules" :key="childIndex">
                        <router-link :to="childItem.url" class="flex-between-center" >
                            <img :src="childItem.img" />
                            <div class="content flex-between-center flex-column flex1">
                                <div class="name w100">{{ childItem.subTitle }}</div>
                                <div class="description line1 w100">
                                    {{ childItem.description }}
                                </div>
                            </div>
                        </router-link>
                    </div>
                </div>
            </div>
            <el-drawer  :visible.sync="showEdit" direction="btt" size="95%" :show-close="false" :wrapperClosable="false">
                <header slot="title">
                    <span>管理模块</span>
                    <div class="rightTop">
                        <el-button type="text" @click="saveModules">完成</el-button>
                    </div>
                </header>
                <section>
                    <p>我的模块</p>
                    <SlickList class="list" lockAxis="xy" axis="xy" v-model="showModules" :pressDelay="200" lockOffset="0px" @input="sortResults" @sort-end="sortEnd" helperClass="drag" lockToContainerEdges>
                        <SlickItem class="childItem" v-for="(childItem, childIndex) in showModules" :index="childIndex" :key="childItem.subTitle" :item="childItem.subTitle">
                            <div class="flex-between-center">
                                <i class="circle el-icon-minus" @click="removeModules(childIndex)"></i>
                                <img :src="childItem.img" />
                                <div class="content flex-between-center flex-column flex1">
                                    <div class="name w100">{{ childItem.subTitle }}</div>
                                    <div class="description line1 w100">
                                        {{ childItem.description }}
                                    </div>
                                </div>
                            </div>
                        </SlickItem>
                    </SlickList>
                </section>
                <section>
                    <p>待添加的模块</p>
                    <div class="list flex-between-center flex-wrap">
                        <div class="childItem" v-for="(childItem, childIndex) in deleteModules" :key="childItem.subTitle">
                            <div class="flex-between-center" >
                                <i class="circle el-icon-plus" @click="addModules(childIndex)"></i>
                                <img :src="childItem.img" />
                                <div class="content flex-between-center flex-column flex1">
                                    <div class="name w100">{{ childItem.subTitle }}</div>
                                    <div class="description line1 w100">
                                        {{ childItem.description }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

            </el-drawer> -->
        </div>
    </appFrame>
</template>

<script src="./js/index.js"></script>

<style lang="scss" src="./css/index.scss" scoped></style>
